<div class="tosca-artifact-page">
    <ngx-datatable
            columnMode="flex"
            [headerHeight]="40"
            [rowHeight]="35"
            [reorderable]="false"
            [swapColumns]="false"
            [rows]="toscaArtifacts$ | async"
            [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]"
            #toscaArtifactsTable
            (activate)="onActivate($event)">
        <ngx-datatable-row-detail [rowHeight]="80">
            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                <div>Label: {{row.artifactLabel}}</div>
                <div>UUID: {{row.artifactUUID}}</div>
                <div>Description: {{row.description}}</div>
            </ng-template>
        </ngx-datatable-row-detail>
        <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3"
                              [prop]="'artifactDisplayName'">
            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
                <div class="expand-collapse-cell">
                    <svg-icon [clickable]="true" class="expand-collapse-icon"
                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
                              [size]="'medium'"></svg-icon>
                    <span>{{row.artifactDisplayName }}</span>
                </div>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column [resizeable]="false"name="Type" [flexGrow]="3">
            <ng-template ngx-datatable-cell-template let-row="row">
                {{row.artifactType}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1">
            <ng-template ngx-datatable-cell-template let-row="row">
                {{ row.artifactVersion }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column [resizeable]="false"[flexGrow]="1">
            <ng-template ngx-datatable-cell-template let-row="row">
                <div class="download-artifact-button">
                    <download-artifact [artifact]="row" [componentId]="componentId"
                                       [componentType]="componentType"
                                       testId="download_{{row.artifactDisplayName}}"></download-artifact>
                </div>
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>
</div>